<template>
  <div class="wrap">
    <sticky class="sticky" :check-sticky-support="false" v-show="tabShow" ref="sticky">
      <tab :line-width="1" style="" class="classification">
        <tab-item 
        v-for="(value,index) in tabDatas" 
        :selected='index<1' 
        @click.native="switchTab(index)" 
        :key="index">{{value.name}}</tab-item>
        <span style="" class="more iconfont icon-dayuhao" @click="moreTab">
        </span>
      </tab>
    </sticky>
    <div class="moreClass" v-show="!tabShow">
      <div class="top">
        <h2>切换分类</h2>
        <span class=" iconfont icon-dayuhao1" @click="moreTab"></span>
        <hr />
        <ul>
          <li v-for="(value,index) in tabData">
            <a @click="switchTab(index)">{{value.name}}</a>
          </li>
        </ul>
      </div>
    </div>
    <goodList title="" ref='goodList'></goodList>
  </div>
</template>

<script>
import { Grid, GridItem, Scroller, LoadMore, Tab, TabItem, Sticky } from 'vux'
import GoodList from '@/components/goodList.vue'
export default {
  components: {
    Grid,
    GridItem,
    Scroller,
    LoadMore,
    Tab,
    TabItem,
    Sticky,
    GoodList
  },
  data() {
    return {
      bottomCount: 20,
      tabShow: true,
      tabData: [
        { id: 700, name: '今日推荐' },
        { id: 701, name: '酒水饮料' },
        { id: 700, name: '粮油副食' },
        { id: 700, name: '个护美妆' },
        { id: 700, name: '咖啡奶粉' }
      ]
    }
  },
  computed: {
    tabDatas() {
      return this.tabData.filter((value, index) => {
        return index < 4
      })
    }
  },
  methods: {
    switchTab(index) {
      this.$store.commit('changeGoodListData', this.tabData[index].id)
      this.$refs.goodList.init()
    },
    moreTab(evt) {
      event.stopPropagation()
      this.tabShow = !this.tabShow
      this.$nextTick(() => {
        var topDom = document.getElementsByClassName('top')[0]
        if (topDom) {
          var num = Math.ceil(this.tabData.length / 4)
          document.getElementsByClassName('top')[0].style.height =
            2.5 + 3 * num + 'rem'
        }
      })
    },
    bindSticky() {
      this.$nextTick(() => {
        this.$refs.sticky.bindSticky()
      })
    }
  },
  mounted() {}
}
</script>

<style scoped="scoped">
.box1 {
  padding-bottom: 5rem;
}

.item {
  width: 100%;
  height: 100%;
}

.item img {
  width: 100%;
  height: 100%;
}

.item h3 {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.57);
}

.item span {
  color: red;
}

.classification {
  position: relative;
  /*margin-top: 3rem;*/
  margin-right: 2rem;
  height: 3rem;
}

.more {
  position: absolute;
  background: white;
  right: -2.1rem;
  display: block;
  width: 2.2rem;
  height: 3rem;
  text-align: left;
  line-height: 2.6rem;
}

.sticky {
  height: 3rem;
}

.moreClass {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 0;
  z-index: 9;
}

.moreClass .top {
  width: 100%;
  min-height: 6.5rem;
  position: relative;
  background: white;
  margin-top: 2.78rem;
}

.moreClass .top h2 {
  border-top: 1px solid #c7c7c7;
  font-weight: normal;
  text-align: center;
  color: gray;
  font-size: 1.2rem;
  padding: 0.3rem;
}

.moreClass .top .iconfont {
  position: absolute;
  z-index: 90;
  padding: 0.2rem 1rem;
  right: 1rem;
  top: 0.5rem;
}

.moreClass .top hr {
  opacity: 0.6;
}

.moreClass .top ul {
  width: 100%;
  list-style: none;
  margin-top: 1rem;
}

.moreClass .top ul li {
  text-align: center;
  float: left;
  width: 20%;
  margin-left: 4%;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.moreClass .top ul li:hover a {
  opacity: 0.6;
}

.moreClass .top ul li a {
  font-size: 0.8rem;
  transition: all 0.2s;
  color: gray;
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.06);
}
</style>